Firebase Authenticationで認証を行いIDトークン（JWT）を取得する
概要
Firebase Authenticationの仕組み・流れは本当になんとなくベースでわかってる。
ただ、実際に手で動かして体感してみないと、モノになったとは言えない。
なので、自分の手で調べて動かして、ちゃんとIDトークンを取得するところまで行く。
作業ログ
目標
フロントサイドでjsコード, htmlコードを簡単に書き、そこからFirebase Authenticationの認証を行ってIDトークンを取得する
作業の流れ
1. yarn x webpackでjs開発の基盤を立てる
2. FirebaseUI, Firebase SDKを使って認証を行う方法を学ぶ
3. 実際に実装して認証を行ってみる
4. ...
ログ
まずはyarn x webpackでjs開発の基盤を立てよう
yarn, npmの仕組み、役割とは？
主要な役割：必要なjs関連のライブラリをインストールして管理してくれる
追加も削除も簡単にできる
また、インストールしたライブラリのスクリプトを実行する仕組みもある
webpackの仕組み、役割とは？
主要な役割：複数の様々なファイル（css, js, svg, ...）などを1つのbundle.jsという形に詰め込む
複数のファイルを1つのjsに詰め込む際に必要な作業（変換、圧縮など）は、このwebpackがやってくれる
変換には、そのファイルにあったプラグインなどを利用してる
適当に...
一旦yarnとwebpackをインストール
$ yarn init
$ yarn add -D webpack
webpack.config.jsを作成
code: webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: "./src/app.js",
output: {
filename: "bundle.js",
path: __dirname + "/build"
}
}
適当にindex.htmlを作成しよう
code: index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>aaaaaa</title>
</head>
<body>
<h1>aaaaaaaaaaaaaaa</h1>
<script src="build/bundle.js"></script>
</body>
</html>
src/app.jsを作成
code: app.js
alert('ok');
一旦こんなもんでOKでしょう
最後に、yarn run webpackを実行したら、buildディレクトリ配下に成果物jsが作成される
あとは、index.htmlをブラウザで立ち上げたら、jsファイルも起動することが確認できる
毎回、webpackをビルドするのは面倒なので、webpack-dev-serverを利用しよう
$ yarn add -D webpack-dev-server
webpack.config.jsには以下を追加しておくこと
code: webpack.config.js
...
devServer: {
static: {
directory: path.join(__dirname, 'public')
}
}
...
よし一旦yarn x webpackの基盤はできたはず
Firebase UIとFirebase SDKのどっちかを使って、Firebase Authenticationに対して認証をしていこう
ちょっとまだ意味わからんわ
Firebaseのフロント側で実装していくぅ
このドキュメントを読んだらいい感じに進んでいけてる
ただこれ、UIなんかSDKなんかわからん
Googleログインしてみよう
この公式ドキュメントを参考にしたらできた。
やっぱ公式ドキュメントって神やな
よし疑問を解決しよう
まず上で試した方法はSDKか？それともUIか？
多分SDK
SDKの場合、ログインボタンとか自分で作らないといけない。
認証の手段が増えれば、その数分作らないといけなくなる。
3, 4個とかなら、まあ耐えるっちゃ耐える気がするが。
そういう自分でUI作るの面倒だなぁって人におすすめなのがFirebaseUI。
こいつはSDKの上で成り立つライブラリ
todo.icon 試してみよう
所感
正味な話、yarn, node, webpackの意味や関係をうろ覚えではある...
何回、学習し直しても忘れる...
これは何回も手を動かして頭に刷り込んで行くしか無いのだろうと思う日々
CookieCutter的な感じで自分用の箱をgitに用意しておこうかな
手を動かして初めて、少しずつ確かにwebpackってこんな感じやったなという記憶が蘇ってくる
これを常に頭の中に暗記してる状態、もしくはすぐ思い出せる状態にしたい。
todo.icon備忘録・指針的なものを書こうかな
Q&A
q.icon Firebase AuthenticationのSDKとUIの違いは？
a.icon SDKはFirebaseがクライアントサイドにおける認証実施のための基盤ツール。
UIは、上記のSDKを使ってボタンの実装などの手間を省いてくれるツール。
SDKの方がカスタマイズ性が高く、UIの方が低い
ただし、UIの方がボタンとか作る必要なく簡単に認証デザイン的なのを提供してくれる。
q.icon FirebaseのSDK認証で帰ってきたtokenってJWTトークン？このJWTトークンを使って、別バックエンドで検証できる？
a.icon できる